<template>
  <div class="remark-box">
    <div class="title">共有{{remarkNum}}条评论</div>
    <div class="close-icon">
      <!-- <van-icon name="arrow-down" @click="packUp()"/> -->
    </div>
    <div class="input-box">
      <img :src="userImg" alt="">
      <div>
        <form action="javascript:return true">
          <input type="text" placeholder="添加评论" v-model="value" @keyup.enter="getInput">
        </form>
      </div>
    </div>
    <div class="show-remark" v-for="(item,index) in remarkContent" :key="index">
      <div class="other-img">
        <img :src="item.img" alt="">
      </div>
      <div class="content-box">
        <div class="nameAndTime">
          <div class="name" :class="item.name.length>5?'over':''">
            <span>{{item.name}}</span>
          </div>
          <div class="time">{{item.time}}</div>
        </div>
        <div class="content">{{item.content}}</div>
      </div>
      <div class="like-box" @click="cutOutTime(item,index)">
        <img v-show="!item.like" src="../../assets/image/icon／点赞 (2).png" alt="">
        <img v-show="item.like" src="../../assets/image/icon／点赞 (1).png" alt="">
        <span>{{item.likeNum}}</span>
      </div>
    </div>
    <div class="loading" v-if="loading">
      <van-loading size="24px">加载中...</van-loading>
    </div>
    <div class="get-more" v-else>
      <span @click="getMore" v-show='hasMore'>点击加载更多</span>
      <span v-if="!hasMore">没有更多了</span>
    </div>
  </div>
</template>

<script>
import { getCommentDetail, setComment, getVideoMsg, getLikeComment, getUserIdData } from '../../views/video/api'

export default {
  props: {
    id: {
      type: String
    },
    idShow: {
      type: Boolean
    }
  },
  data() {
    return {
      remarkNum: 0,
      userImg: require('../../assets/image/moren.jpg'),
      remarkContent: [
        // {
        //   img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Ftfscom%2Fi3%2F3990335621%2FO1CN01RMWrA91rOSozHBS32_%21%213990335621.jpg_670x670.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637292916&t=3df93c63f9c7b72c58e91208e9b75d36',
        //   name: '海纳',
        //   time: '一周前',
        //   content: '这个插件，只需要简单三步即可在自己的网站里嵌入，超轻。1、获取APP ID  2、一行代码引入组件。3、配置几个参数',
        //   likeNum: 2,
        //   like: true
        // }
      ],
      currentIndex: 0,
      likeIt: false,
      value: '',
      currentPage: 0,
      perPageNumber: 20,
      hasMore: true,
      loading: true,
      changeTime: new Date().getTime(), // 当前时间
      userId: ''
    }
  },
  methods: {
    // 定时器
    cutOutTime(item,index) {
      this.changeTime = new Date().getTime()
      setTimeout(() => {
        if(new Date().getTime() - this.changeTime >= 1000) {
          this.likeRemark(item,index)
        }
      }, 1000)
    },
    // 用户点赞
    async likeRemark(item,index) {
      console.log(item.like)
      let id = item.id
      if(sessionStorage.getItem("token") !== null) {
        const {data} = await getLikeComment(id,!item.like)
        this.remarkContent[index].like = !item.like // 每一次点赞都改变状态
        if(this.remarkContent[index].like) {
          this.remarkContent[index].likeNum++
        } else {
          this.remarkContent[index].likeNum--
        }
        console.log(this.remarkContent[index])
      } else {
        this.$toast({
          message: '请先登录'
        })
      }
      
    },
     // 发表评论
    async comment(comment) {
      let params = {
        vid: this.$route.query.id,
        plValue: comment
      }
      const data = await setComment(params)
      console.log(data)
      if(data.code === 0) {
        // 展示加载icon
        this.loading = true
        this.remarkContent = [] // 清除原有数据
        this.getRemark() // 重新获取数据
        this.value = ''
        setTimeout(() => {
          this.$toast('评论成功')
        }, 1000)
      } else if (data.code === 40001) {
        this.$toast('请先登录')
      } else {
        this.$toast('请检查网络')
      }
    },
    // 用户输入
    getInput() {
     // console.log(this.value)
      if(this.value !== null && this.value !== '') {
        console.log(this.value)
        this.currentPage = 0
        this.comment(this.value)
      } else {
        this.$toast('评论不能为空')
      }
    },
    // 获取评论
    async getRemark() {
      // 获得评论列表
      let params = {
        vId: this.id,
        currentPage: this.currentPage,
        perPageNumber: this.perPageNumber,
        uId: this.userId
      }
      const res = await getCommentDetail(params)
      if(res.data.returnCommentContents.length === 0) {
        this.hasMore = false
        this.loading = false
      } else {
        const remarkContent = res.data.returnCommentContents.map(item => {
          if(item.state === 0) {
            item.state = false
          } else if (item.state === 1) {
            item.state = true
          }
          // 计算时间戳
          let a = Date.parse(new Date(item.commentTime))/1000
          let b = new Date().getTime()/1000
          let c = (b-a)/(3600*24)
          let d
          if(c>7) {d = '一周前'}
          else if (c>30) {d = '一个月前'}
          else if (c>365) {d = '一年前'}
          else {d = item.commentTime}
          return {
            time: d,
            img: item.face === '' ? require('../../assets/image/moren.jpg') : item.face,
            name: item.username,
            content: item.tbCommentsC.plValue,
            likeNum: item.tbCommentsC.likeCount,
            like: item.state,
            id: item.tbCommentsC.id
          }
        })
        // 长度为0时显示没有跟多了
        if(remarkContent.length < 20 && remarkContent.length !== 0) {
          this.remarkContent.push(...remarkContent)
          this.hasMore = false
          this.loading = false
        } else if (remarkContent.length === 0) { 
          this.hasMore = false
        } else {
          this.remarkContent.push(...remarkContent)
        }
        // 获取用户信息
        const {data} = await getVideoMsg(this.id)
        // this.userImg = data.list[0].tbCelebrityManagementCS.images
        this.remarkNum = data.list[0].countComment
        // 请求完数据隐藏加载icon
        this.loading = false
      }
    },
    // 加载跟多
    getMore() {
      console.log('加载更多')
       // 分页
      this.currentPage = this.currentPage+20
      this.perPageNumber = 20
      // 显示加载icon
      this.loading = true
      this.getRemark()
    },
    // 获取用户id
    async getUserId() {
      const res = await getUserIdData()
      this.userId = res.data.userId
      this.userImg = res.data.infoCUser.imPicUrl === '' ? require('../../assets/image/moren.jpg') : res.data.infoCUser.imPicUrl
      this.getRemark()
      // console.log(res.data.userId)
    },
    // 用户超出5个字就显示省略号
  },
  created() {
    // this.getRemark()
    // console.log(sessionStorage.getItem('token'))
    // token存在就带token
    if(sessionStorage.getItem('token') !== null) {
      this.getUserId()
    } else {
      this.getRemark()
    }
  },
  watch: {
    idShow: 'getRemark'
  }
}
</script>

<style scoped lang="less">
  .loading{
    text-align: center;
    padding: 10px;
  }
  .remark-box{
    position: relative;
    .title{
      height: 47px;
      border: 1px solid rgba(237, 237, 237, 1);
      text-align: center;
      line-height: 47px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
    }
    .close-icon{
      position: absolute;
      top: 18px;
      right: 19px;
    }
    .input-box{
      padding: 22px 16px;
      display: flex;
      img{
        width: 34px;
        height: 34px;
        border-radius: 50%;
      }
      div{
        input{
          margin-left: 8px;
          padding-left: 16px;
          height: 34px;
          width: 120%;
          background: #F8F8F8;
          border-radius: 17px;
          border: none;
        }
        input::-webkit-input-placeholder{
          color: rgba(179, 179, 179, 1)
        }
      }
    }
    .show-remark{
      display: flex;
      padding-top: 16px;
      // padding: 8px 0 16px 0;
      .other-img{
        text-align: center;
        flex: 2;
        img{
          width: 34px;
          height: 34px;
          border-radius: 50%;
        }
      }
      
      .content-box{
        flex: 9;
        // padding-right: 5px;
        // background-color: pink;
        min-width: 0; 
        padding-bottom: 16px;
        border-bottom: 1px solid #EDEDED;
        .nameAndTime{
          width: 100%;
          display: flex;
          padding-bottom: 4px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #999999;
          .name{
            padding-right: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .over{
            width: 30%;
          }
          .time{
          }
        }
        .content{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
      .like-box{
        text-align: center;
        flex: 1.5;
        border-bottom: 1px solid #EDEDED;
        span{
          display: block;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
    }
    .get-more{
      text-align: center;
      letter-spacing: 1px;
      padding: 16px 0;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }
</style>